<template>
  
  <div style="background-color: #FBFBEA;border-radius: 5px;">
    <div  style="padding-left: 20px;display: inline-block;margin-top: 20px;font-weight: bold;font-size: 20px;">个人信息</div>
    <el-form class="usernew" :model="userform" label-width="100px">
      <el-form-item label="账户名">
        <el-input  v-model="userform.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="userform.pet" autocomplete="off"></el-input>
      </el-form-item>

   <!--    <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://47.99.51.143:9000/files/upload" 
          name="image"
          :show-file-list="false"
          :on-success="successUserUpload"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="userform.image" :src="'http://47.99.51.143:9000/files/' + userform.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item> -->

      <el-form-item label="头像" >
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="http://47.99.51.143:9000/files/upload"
          
          :on-success="successUserUpload"
          style="float: left; margin-left: 20px"
        >
        <img v-if="userform.image" :src="'http://47.99.51.143:9000/files/' + userform.image" class="avatar">

         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         

          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>




      <el-form-item label="性别">
        <el-select v-model="userform.gender" placeholder="请选择">
          <el-option
            v-for="item in genderList"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="userform.phone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="userform.email" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary"  @click="userSubmit()" style="margin-bottom: 20px;">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<script>
import request from '@/request/request.js';
import { EventBus } from '@/main.js';

export default {
  data() {
    return {
      userFormVisible: true,
      genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      userform: {
        image: "",
      }
    }
  },
  methods: {
    successUserUpload(res, file) {
      console.log(res);
      console.log(file);
      this.userform.image = res.data;
      this.user.image = res.data;
      localStorage.setItem("user", JSON.stringify(this.user));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    userEdit() {
      request.get("/user/" + this.user.id).then((res) => {
        if (res.code === "0") {
          console.log(res.data);
          this.userform = res.data;
          this.user = res.data;
          localStorage.setItem("user", JSON.stringify(res.data));

        }
      })
    },
    userSubmit() {
      this.$confirm('你确定要修改个人信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        request.post("/user", this.userform).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "修改成功", type: "success" });
            console.log(this.userform);
            //更新本地缓存
            /* localStorage.setItem("user", JSON.stringify(res.data)); */
            this.userEdit();
            /*  this.user = {...this.user, ...res.data};
               localStorage.setItem("user", JSON.stringify(this.user)); */
            EventBus.$emit('reloadSide');
          } else {
            this.$message({ message: "修改失败", type: "error" });
          }
        });

      }).catch(() => {
        this.$message({ message: '已取消', type: 'info' });

      });
    },
  },
  created() {
    this.userEdit();
  },
}
</script>



<style scoped>
div /deep/ .el-input__inner {
  background-color: rgb(184, 225, 144);
  color: #000;
  font-size: 16px;
  font-weight: normal;
}
</style>










